import React, { useEffect, useState } from 'react'
import {Outlet, Link} from 'react-router-dom'

export default function Message() {

  // 消息列表状态
  const [messages, setMessages] = useState([])

  // 初始化请求获取消息列表显示
  useEffect(() => {
    // 模拟请求
    setTimeout(() => {
      const messages = [
        {id: 1, title: 'Message001', content: 'Message Content 001111'},
        {id: 2, title: 'Message002', content: 'Message Content 002222'},
        {id: 3, title: 'Message003标', content: 'Message Content 003333'}
      ]
      setMessages(messages)
    }, 1000);
  }, [])


  return (
    <>
      <ul>
        {
          messages.map(m => (
            <li key={m.id}>
              {/* 跳转时携带query参数 */}
              <Link to={`detail?id2=${m.id}&title2=${m.title}&content2=${m.content}`}>{m.title}</Link>
            </li>
          ))
        }
      </ul>
      <br />
      <hr />
      { /* 在此显示三级路由组件: MessageDetail */}
      <Outlet/>
    </>
  )
}
